<template>
  <div class="user-auth">
    <a-card :body-style="{ padding: '32px' }" :bordered="false">
      <div class="auth-title">
        <div class="title">项目信用申请 - 3.基本信息填写</div>
        <div class="desc">
          基本资料以实名信息为准，以下信息仅供参考，填写信息方便我们更好的为您服务。
        </div>
      </div>
      <div class="auth-content">
        <a-steps :current="2">
          <a-step
            v-for="item in [
              '材料准备',
              '材料信息上传',
              '基本信息填写',
              '完成待审核',
              '项目信用申请成功'
            ]"
            :key="item"
            :title="item"
          />
        </a-steps>
        <a-form-model
          :model="model"
          ref="form"
          :rules="rules"
          style="margin-top: 40px;"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 12 }"
          @submit="onSubmit"
        >
          <a-divider orientation="left"> 项目基本信息</a-divider>
          <a-form-model-item :label="rules.conUnit[0].title" prop="conUnit">
            <a-input
              :disabled="true"
              v-model="model.conUnit"
              :placeholder="rules.conUnit[0].message"
            />
          </a-form-model-item>

          <a-form-model-item :label="rules.proName[0].title" prop="proName">
            <a-input
              v-model="model.proName"
              :placeholder="rules.proName[0].message"
            />
          </a-form-model-item>

          <a-form-model-item
            :label="rules.proAddress[0].title"
            prop="proAddress"
          >
            <a-input
              v-model="model.proAddress"
              :placeholder="rules.proAddress[0].message"
            />
          </a-form-model-item>

          <a-form-model-item :label="rules.outUnit[0].title" prop="outUnit">
            <a-input
              v-model="model.outUnit"
              :placeholder="rules.outUnit[0].message"
            />
          </a-form-model-item>

          <a-form-model-item :label="rules.proTime[0].title" prop="proTime">
            <a-date-picker
              v-model="model.proTime"
              @change="handleDateChange"
              :placeholder="rules.proTime[0].message"
            />
          </a-form-model-item>

          <a-form-model-item :label="rules.allPrice[0].title" prop="allPrice">
            <a-input
              v-model="model.allPrice"
              :placeholder="rules.allPrice[0].message"
              type="number"
            />
          </a-form-model-item>

          <a-form-model-item
            :label="rules.applyPrice[0].title"
            prop="applyPrice"
          >
            <a-input
              v-model="model.applyPrice"
              :placeholder="rules.applyPrice[0].message"
              type="number"
            />
          </a-form-model-item>
          <a-divider orientation="left">项目唯一结算账户</a-divider>
          <a-form-model-item :label="rules.bankName[0].title" prop="bankName">
            <a-input
              v-model="model.bankName"
              :placeholder="rules.bankName[0].message"
            />
          </a-form-model-item>
          <a-form-model-item
            :label="rules.bankNumber[0].title"
            prop="bankNumber"
          >
            <a-input
              v-model="model.bankNumber"
              :placeholder="rules.bankNumber[0].message"
              type="number"
            />
          </a-form-model-item>
          <a-form-model-item
            :label="rules.bankAddress[0].title"
            prop="bankAddress"
          >
            <a-input
              v-model="model.bankAddress"
              :placeholder="rules.bankAddress[0].message"
            />
          </a-form-model-item>

          <a-form-item :wrapperCol="{ span: 24 }" style="text-align: center">
            <a-button size="large" style="margin-right: 12px;" @click="prev">
              上一步
            </a-button>
            <a-button htmlType="submit" type="primary" size="large">
              下一步
            </a-button>
          </a-form-item>
        </a-form-model>
      </div>
    </a-card>
  </div>
</template>

<script>
import storage from "@/utils/storage";
import { createUserProject, updateUserProject } from "@/api/account";
import { mapGetters } from "vuex";

export default {
  data() {
    const step2Info = storage.getItem("PROJECT_APPLY_STEP2") || {};
    const step3Info = storage.getItem("PROJECT_APPLY_STEP3") || { proTime: "" };

    return {
      model: {
        ...step2Info,
        ...step3Info
      }
    };
  },
  watch: {
    model: {
      handler() {
        storage.setItem("PROJECT_APPLY_STEP3", this.model);
      },
      deep: true
    }
  },
  computed: {
    ...mapGetters(["account"]),
    rules() {
      return {
        conUnit: [
          {
            title: "施工单位",
            required: true,
            message: "请输入单位名称",
            trigger: "blur"
          }
        ],
        proName: [
          {
            title: "项目名称",
            required: true,
            message: "请输入项目名称",
            trigger: "blur"
          }
        ],
        proAddress: [
          {
            title: "项目地点",
            required: true,
            message: "请输入项目地点",
            trigger: "blur"
          }
        ],
        outUnit: [
          {
            title: "发包单位",
            required: true,
            message: "请输入发包单位",
            trigger: "blur"
          }
        ],
        proTime: [
          {
            title: "项目工期至",
            required: true,
            message: "请输入项目工期",
            trigger: "submit"
          }
        ],
        allPrice: [
          {
            title: "项目总金额（元）",
            required: true,
            trigger: "blur",
            message: "请输入项目总金额"
          }
        ],
        applyPrice: [
          {
            title: "申请授权金额（元）",
            required: true,
            trigger: "blur",
            message: "请输入申请授权金额"
          }
        ],
        bankName: [
          {
            title: "账号名",
            required: true,
            message: "请输入账号名",
            trigger: "blur"
          }
        ],
        bankNumber: [
          {
            title: "账号",
            required: true,
            message: "请输入账号",
            trigger: "blur"
          }
        ],
        bankAddress: [
          {
            title: "开户行",
            required: true,
            message: "请输入开户行",
            trigger: "blur"
          }
        ]
      };
    }
  },
  mounted() {
    if (!this.model.conUnit) {
      this.model.conUnit = this.account.name;
      this.$forceUpdate();
    }
  },
  methods: {
    prev() {
      this.$router.go(-1);
    },
    handleDateChange(item) {
      this.model.proTime = item.format("YYYY-MM-DD HH:mm:ss");
    },
    onSubmit(e) {
      e.preventDefault();
      this.$refs.form.validate(async valid => {
        if (valid) {
          if (this.model.ID) {
            await updateUserProject({
              userId: this.account.ID,
              ...this.model,
              applyPrice: Number(this.model.applyPrice),
              allPrice: Number(this.model.allPrice)
            });
          } else {
            await createUserProject({
              userId: this.account.ID,
              ...this.model,
              applyPrice: Number(this.model.applyPrice),
              allPrice: Number(this.model.allPrice)
            });
          }

          this.$router.push("/project/apply/step4");
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.user-auth {
  .auth-title {
    padding-left: 30px;
    margin-bottom: 30px;

    .title {
      font-size: 18px;
      font-weight: bold;
      border-bottom: 1px solid @border-color;
      color: @primary-color;
      padding-bottom: 4px;
    }

    .desc {
      padding-top: 8px;
      font-size: 16px;
      color: @text-color-2;
    }
  }

  .auth-content {
    width: 880px;
    padding: 10px 20px;
    margin: 0 auto;

    .documents-wrapper {
      margin: 40px 0 0;

      .document-item {
        font-size: 18px;
        width: 240px;
        margin: 0 auto 12px;
        text-align: left;

        a {
          text-decoration: underline;
        }
      }
    }

    .next-wrapper {
      width: 240px;
      margin: 30px auto 12px;
      text-align: left;
    }
  }
}

.upload-wrapper {
  display: flex;
  color: @primary-color;
  align-items: center;

  .example-wrapper {
    cursor: pointer;
    .icon-right {
      width: 10px;
      height: 10px;
    }
  }
}
</style>
